<!-- <template>
   <el-row>
    <el-col :span="24">
        <el-card>
            <div id="PieOne"></div>
        </el-card>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="12">
        <el-card>
            213
        </el-card>
    </el-col>
    <el-col :span="12">
        <el-card>
            213
        </el-card>
    </el-col>
  </el-row>
</template>
<script setup>

</script>
<style scoped></style> -->
<template>
    <div ref="myChart" id="myChart" :style="{ width: '800px', height: '400px' }"></div>
</template>
<script>
import { getCurrentInstance, onMounted } from 'vue';

export default {
    setup() {
        // 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
        let internalInstance = getCurrentInstance();
        let echarts = internalInstance.appContext.config.globalProperties.$echarts;

        onMounted(() => {
            const dom = document.getElementById('myChart');
            const myChart = echarts.init(dom); // 初始化echarts实例
            const option = {
                title: {
                    text: '图表',
                    subtext: new Date().toLocaleDateString(),
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 1048, name: '北京' },
                            { value: 735, name: '上海' },
                            { value: 580, name: '长沙' },
                            { value: 484, name: '天津' },
                            { value: 300, name: '柬埔寨' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ],
                
            };
            // 设置实例参数
            myChart.setOption(option);
        });
        return {};
    },
};
</script>